<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation
	<a class="m-link" href="https://material.angular.io/components/bottom-sheet/" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-12">
		<m-material-preview [viewItem]="exampleBasic">
			<div class="m-section">
				<span class="m-section__sub">
					The
					<code>MatBottomSheet</code> service can be used to open Material Design panels to the bottom of the screen. These panels are intended primarily as an interaction on mobile devices where they can be used as an alternative to dialogs and menus.
				</span>
				<span class="m-section__sub">
						You can open a bottom sheet by calling the <code>open</code> method with a component to be loaded and an optional config object. The <code>open</code> method will return an instance of <code>MatBottomSheetRef</code></span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<p>You have receive a file called "cat-picture.jpeg".</p>
					<button mat-raised-button (click)="openBottomSheet()">Open file</button>

				</div>
			</div>
		</m-material-preview>
	</div>
</div>